<div class="modal" ng-controller="DecisionTableConclusionEditorCtrl">
  <div class="modal-dialog">
    <div class="modal-content">
      <form name="outputExpressionForm">
        <div class="modal-header"><h2>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-TITLE' |
          translate}}</h2>
          <p>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-DESCRIPTION' | translate}}</p>
        </div>
        <div class="modal-body">
          <div class="clearfix form-group"
               ng-class="{'has-error': outputExpressionForm.expressionLabel.$invalid}">
            <div class="col-xs-4">
              <label>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.EXPRESSION-LABEL' |
                translate}}</label>
            </div>
            <div class="col-xs-8">
              <input class="form-control" name="expressionLabel"
                     ng-disabled="model.readOnly"
                     ng-model="popup.selectedExpressionLabel"
                     placeholder="{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.EXPRESSION-PLACEHOLDER' | translate}}"
                     type="text"/>
            </div>
          </div>

          <div class="clearfix form-group"
               ng-class="{'has-error': outputExpressionForm.variableId.$invalid}">
            <div class="col-xs-4">
              <label>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-NEW-VARIABLE-ID' |
                translate}}</label><span class="marker">*</span>
            </div>
            <div class="col-xs-8">
              <input class="form-control" name="variableId" ng-disabled="model.readOnly"
                     ng-model="popup.selectedExpressionNewVariableId"
                     ng-required="true" placeholder="Enter variable id" type="text"
                     variable-identifier/>
            </div>
          </div>

          <div class="clearfix form-group"
               ng-class="{'has-error': outputExpressionForm.newVariable.$invalid}">
            <div class="col-xs-4">
              <label>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-NEW-VARIABLE-TYPE' |
                translate}}</label>
            </div>
            <div class="col-xs-8">
              <select class="form-control" name="newVariable"
                      ng-disabled="model.readOnly" ng-model="popup.selectedExpressionNewVariableType"
                      ng-options="type for type in model.availableOutputVariableTypes" ng-required="true"/>
            </div>
          </div>

          <div>
            <div class="clearfix form-group">
              <div class="col-xs-4">
                <label>{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-VALUES' |
                  translate}}
                  <span ng-if="popup.currentHitPolicy === 'PRIORITY' || popup.currentHitPolicy === 'OUTPUT ORDER'">{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-VALUES-NOT-OPTIONAL' |
                                    translate}}</span>
                  <span ng-if="popup.currentHitPolicy !== 'PRIORITY' && popup.currentHitPolicy !== 'OUTPUT ORDER'">{{'DECISION-TABLE-EDITOR.POPUP.EXPRESSION-EDITOR.OUTPUT-VALUES-OPTIONAL' |
                                    translate}}</span>
                </label>
              </div>
              <div class="col-xs-8" ng-if="!model.readOnly">
                <hot-table class-name="'htMiddle'"
                           columns="popup.columnDefs"
                           datarows="popup.selectedExpressionOutputValues"
                           hot-auto-destroy
                           hot-id="decision-table-allowed-values"
                           manual-row-move="true"
                           min-spare-rows="1"
                           on-after-render=doAfterRender
                           read-only="model.readOnly"
                           row-headers="true"
                           row-heights="30"
                           settings="popup.hotSettings">
                </hot-table>
              </div>
              <div class="col-xs-8" ng-if="model.readOnly">
                <div ng-repeat="allowedValue in popup.selectedExpressionOutputValues"><span style="font-size: 14px">{{allowedValue[0]}}</span><br>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <div class="pull-right">
            <button class="btn btn-sm btn-default" ng-click="cancel()" type="button">
              {{'GENERAL.ACTION.CANCEL' | translate}}
            </button>
            <button class="btn btn-sm btn-default" ng-click="save()" ng-disabled="!outputExpressionForm.$valid"
                    ng-if="!model.readOnly"
                    type="button">
              {{'GENERAL.ACTION.SAVE' | translate}}
            </button>
          </div>
          <div class="loading pull-right" ng-show="model.loading">
            <div class="l1"></div>
            <div class="l2"></div>
            <div class="l2"></div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
